<template>
  <div>
    {{ count }}
    <br />
    <!-- 计算数据存储在仓库对象中的getters中,存放着处理过的值,当原数值修改时,该数值也会修改 -->
    {{ countSqrt }}
    <!-- getters预处理也有对应的辅助函数, -->
    <br />
    当前电影一共有{{ Movielength.length }}
    <br />
    <button @click="adds">点击增加</button>
    <button @click="addsn({ n: 100 })">点击增加100</button>
    <button @click="addsWait">异步增加</button>
    <!-- 如果需要传入参数,和mutation中一致,传入payload载荷 -->
    <button @click="addsnWait({ n: 150 })">异步增加n</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  mounted() {
    // console.log(this.$store.state.count)
    // vuex中提供了内置的方法用于获取全部的数据 mapState
    // let mapFunct = mapState(['count'])
    // mapState需要传入对应的键名获取相应的值.传入的类型应为对象或者数组, 返回值为一个对象,对象中存储着格式类似于计算属性的
    // 函数类型,然后将其传入computed配置项中,就可以实现在本地使用vuex仓库中的值,但是如果直接使用替换computed对象的方式会让其他
    // 计算属性无法书写,这时就需要使用展开运算符,将其中的函数展开到computed中,这样不影响书写,又可以实现将仓库数据写入本地供其使用
    // console.log(mapFunct)
    // 调用函数的方式,是使用$store上的commit方法,键入函数名然后调用函数
    // console.dir(this.$store.commit('adds'))
    //  如果函数带有参数,就在函数名后跟上参数,一般会将参数写为对象的方式进行传输
    // console.dir(this.$store.commit('addsn', { n: 100 }))
    let re = mapGetters('count', ['countSqrt']) //添加模块名
    console.log(re)
    console.log(this)
    // mapGetters也会获取全部的数据,然后返回类似计算属性的类型函数, 然后可以直接展开,在页面中直接使用
    // 函数名就是在vuex中起的名字
  },
  computed: {
    ...mapState('count', ['count']),
    ...mapGetters('count', ['countSqrt']),
    // count(){
    //    return this.$store.state.count
    // }
    Movielength() {
      return this.$store.state.movie.movieList
    },
  },
  methods: {
    // adds() {
    //   // 使用函数本地封装可以使得页面更加简洁
    //   this.$store.commit('adds')
    // },
    // addsn(n) {
    //   this.$store.commit('addsn', { n })
    // },
    ...mapMutations('count', ['adds', 'addsn']),
    // 在vuex中提供另一种获取全部函数的方式mapMutations获取包含全部的数据处理方法的对象,然后直接在methods中展开,如果含有参数直接就可以在调用时添加,内部会直接处理参数

    // addsWait() {
    //   this.$store.dispatch('addsWait')
    // },
    // addsnWait() {
    //   this.$store.dispatch('addsnWait')
    // },
    //同样的,action中也含有辅助函数用于获取多个一般action
    ...mapActions('count', ['addsWait', 'addsnWait']),
  },
}
</script>

<style></style>
